<template>
  <div class="main-nav">
    <div class="nav-content">
      <nav class="nav-list">
        <NuxtLink to="/" class="nav-item" :class="{ active: currentPath === '/' }">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </NuxtLink>
        <NuxtLink to="/changxin-market" class="nav-item" :class="{ active: currentPath.startsWith('/changxin-market') }">
          <i class="fas fa-store"></i>
          <span>昌欣优市</span>
        </NuxtLink>
        <NuxtLink to="/bazaar" class="nav-item" :class="{ active: currentPath.startsWith('/bazaar') }">
          <i class="fas fa-shopping-basket"></i>
          <span>昌欣集市</span>
        </NuxtLink>
        <NuxtLink to="/index" class="nav-item" :class="{ active: currentPath.startsWith('/index') }">
          <i class="fas fa-chart-line"></i>
          <span>昌欣指数</span>
        </NuxtLink>
        <NuxtLink to="/overseas" class="nav-item nav-item-new" :class="{ active: currentPath.startsWith('/overseas') }">
          <i class="fas fa-globe"></i>
          <span>海外仓</span>
          <span class="new-badge">NEW</span>
        </NuxtLink>
        <NuxtLink to="/industry" class="nav-item" :class="{ active: currentPath.startsWith('/industry') }">
          <i class="fas fa-industry"></i>
          <span>产业带</span>
        </NuxtLink>
        <NuxtLink to="/base" class="nav-item" :class="{ active: currentPath.startsWith('/base') }">
          <i class="fas fa-seedling"></i>
          <span>基地</span>
        </NuxtLink>
        <NuxtLink to="/factory-purchase" class="nav-item" :class="{ active: currentPath.startsWith('/factory-purchase') }">
          <i class="fas fa-warehouse"></i>
          <span>工厂收购</span>
        </NuxtLink>
        <NuxtLink to="/park" class="nav-item" :class="{ active: currentPath.startsWith('/park') }">
          <i class="fas fa-building"></i>
          <span>园区企业</span>
        </NuxtLink>
      </nav>
      
      <!-- 昌欣指数显示 -->
      <div class="index-display">
        <div class="index-item">
          <span class="index-label">昌欣指数:</span>
          <span class="index-value">1285.63</span>
          <span class="index-change positive">
            <i class="fas fa-caret-up"></i> 12.38 (+0.97%)
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const currentPath = computed(() => route.path)
</script>

<style lang="scss" scoped>
.main-nav {
  background: #fff;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .nav-content {
    @include container-width;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    
    .nav-list {
      display: flex;
      align-items: center;
      gap: 0;
      white-space: nowrap;
      flex-shrink: 0;
      
      .nav-item {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 12px 12px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        transition: all 0.3s;
        margin: 0 1px;
        white-space: nowrap;
        
        i {
          font-size: 14px;
          color: #666;
        }
        
        &:hover {
          color: #e4393c;
          background: #fef5f5;
          border-radius: 4px 4px 0 0;
          
          i {
            color: #e4393c;
          }
        }
        
        &.active {
          color: #e4393c;
          font-weight: 500;
          background: #fef5f5;
          border-radius: 4px 4px 0 0;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            background: #e4393c;
            border-radius: 2px 2px 0 0;
          }
          
          i {
            color: #e4393c;
          }
        }
        
        &.nav-item-new {
          position: relative;
          
          .new-badge {
            position: absolute;
            top: 5px;
            right: 8px;
            background: #e4393c;
            color: #fff;
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 2px;
            font-weight: 500;
            line-height: 1.2;
          }
        }
      }
    }
    
    // 昌欣指数样式
    .index-display {
      display: flex;
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
      
      .index-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-left: 10px;
        white-space: nowrap;
        
        .index-label {
          margin-right: 3px;
          font-weight: bold;
          color: #333;
          white-space: nowrap;
        }
        
        .index-value {
          color: #e74c3c;
          font-weight: bold;
          margin-right: 3px;
          white-space: nowrap;
        }
        
        .index-change {
          display: flex;
          align-items: center;
          gap: 2px;
          white-space: nowrap;
          
          &.positive {
            color: #e74c3c;
          }
          
          &.negative {
            color: #52c41a;
          }
          
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
  
  // 高分辨率屏幕下的紧凑布局
  @include desktop-4k {
    .nav-content {
      .nav-list {
        .nav-item {
          padding: 12px 8px;
          margin: 0;
          font-size: 13px;
          
          i {
            font-size: 13px;
          }
        }
      }
      
      .index-display {
        .index-item {
          margin-left: 5px;
          font-size: 13px;
          
          .index-label {
            margin-right: 2px;
          }
          
          .index-value {
            margin-right: 2px;
          }
          
          .index-change {
            gap: 1px;
            
            i {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
  
  @include desktop-5k {
    .nav-content {
      .nav-list {
        .nav-item {
          padding: 12px 8px;
          margin: 0;
          font-size: 13px;
          
          i {
            font-size: 13px;
          }
        }
      }
      
      .index-display {
        .index-item {
          margin-left: 5px;
          font-size: 13px;
          
          .index-label {
            margin-right: 2px;
          }
          
          .index-value {
            margin-right: 2px;
          }
          
          .index-change {
            gap: 1px;
            
            i {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
}
</style>
